@import "variables";
html, body {
  color: #333;
  font-size: 14px;
  letter-spacing:1px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  -moz-user-select:none; /*火狐*/
  -webkit-user-select:none; /*webkit浏览器*/
  -ms-user-select:none; /*IE10*/
  user-select:none;
}
html, body, #app {
  height: 100%;
  width: 100%;
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container {
  height: $-body-height;
}

.drag {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}

.tc {
  text-align: center;
}
.tr {
  text-align: right;
}


.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-center {
  @include flex_center()
}
.col-center {
  align-items: center;
}
.col-top {
  align-items: flex-start;
}
.col-bottom {
  align-items: flex-end;
}
.row-center {
  justify-content: center;
}
.row-between {
  justify-content: space-between;
}
.row-around {
  justify-content: space-around;
}
.row-end {
  justify-content: flex-end;
}

@for $i from 1 through 60 {
  .fz-#{$i} {
    font-size: #{$i}px!important;
  }
}
@for $i from 1 through 800 {
  .h-#{$i} {
    height: #{$i}px;
  }
  .w-#{$i} {
    width: #{$i}px;
  }
  .wh-#{$i} {
    width: #{$i}px;
    height: #{$i}px;
  }
}
@for $i from 0 through 200 {
  .m-#{$i} {
    margin: #{$i}px;
  }
  .p-#{$i} {
    padding: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

@for $i from 2 through 16 {
  .br-#{$i} {
    border-radius: #{$i}px;
  }
}

.line-clamp, .line-clamp-2, .line-clamp-3{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: initial;
  word-break: normal;
}
.line-clamp {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.line-clamp-2{
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.line-clamp-3{
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.bold {
  font-weight: bold;
}
.cursor {
  cursor: pointer;
}

.color-white {
  color: $-color-white;
}
.bg-white {
  background: #fff;
}
.color-black {
  color: $-color-black;
}
.color-red {
  color: $-color-red;
}
.color-orange {
  color: $-color-orange;
}
.color-gray {
  color: $-color-gray;
}
.color-violet {
  color: $-color-violet;
}
.theme-color {
  @include font_color();
}

::-webkit-scrollbar{width: 2px;background-color: #f5f5f5;}
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);background-color: #FFFFFF;}
::-webkit-scrollbar-thumb{-webkit-box-shadow: inset 0 0 6px rgba(216, 216, 216,1);background-color: #D8D8D8;}
input[type=number] {
  -moz-appearance:textfield;
  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  outline: none!important;
}

.no-data {
  font-size: 14px;
  padding: 10px;
  margin-top: 10px;
  color: $-color-gray;
  @include flex_center();
  @include flex_center()
}

.hot-labels {
  display: flex;
  .label-hot, .label-rec {
    width: 32px;
    height: 16px;
    font-size: 10px;
    @include flex_center();
  }
  .label-hot {
    background: rgba($-color-red, 0.2);
    color: $-color-red;
  }
  .label-rec {
    background: rgba($-color-orange, 0.2);
    color: $-color-orange;
  }
}

